<template>
  <div>
    <l-header :sliderShow="false" :backShow="true"  :backUrl="'examine'"></l-header>
    <div class="w89">
      <h2 class="title">{{$t('verify.index.5636znopad00')}}</h2>
      <h3 class="title_msg">
        {{
          legalize_type == 3?$t('verify.index.563708b7jvw0'):$t('verify.index.563708b7l1g0')
        }}
        
      </h3>
      <ul class="stepList">
        <li v-for="(item, index) in stepList" :key="index">
          <img :src="item.icon" alt="" />
          <h2>{{ index + 1 }}.{{ item.title }}</h2>
          <h3 class="title_msg">
            {{ item.subtitle }}
          </h3>
        </li>
      </ul>
      <div  class="detailCon">
        <div class="title">
          <h2 v-show="legalize_type">{{ legalize_type == 2 ? $t('verification.index.5636t6sghtc0') : $t('verification.index.5636t6sgi1s0') }}</h2>
          <span  v-show="legalize_type">{{legalize_type == 2 ? $t('verify.index.5636znopcv80'): $t('verify.index.5636znopd4c0')}}</span>
          <a v-if="legalize_type == 3" @click="$routerTo('CounterAddress')">{{$t('verify.index.5636znopddw0')}}</a>
          <div v-if="legalize_type == 3" class="meetDetail">
            <div class="custom-title">
              {{$t('web.CounterOrder.5636yjg7pww0')}} ：{{ parseTime(appointment.appoint_date,'{y}/{m}/{d}') }} {{appointment.appoint_time}}
            </div>
            <div class="custom-title">{{$t('web.CounterAddress.5636y48w99g0')}}{{ appointment.scenes['name_'+langSuff] }}{{ appointment.scenes['area_'+langSuff] }}{{ appointment.scenes['content_'+langSuff] }}</div>
            <div class="custom-title">{{$t('web.CounterAddress.5636y48w9kc0')}}{{ appointment.scenes['mobile_zh'] }}</div>
            <div class="custom-title">{{$t('web.CounterAddress.5636y48w9w00')}}{{ appointment.scenes.email }}</div>
            <div class="custom-title">{{$t('web.CounterAddress.5636y48wa4o0')}}{{ appointment.scenes['business_remark_'+langSuff] }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fff } from "@/assets/less/global.less";
import {  statusGet  } from '@/api/allPage'

export default {
  data() {
    return {
      stepList: [
        {
          icon: require("@/assets/img/icon1.png"),
          title: this.$t('verify.index.5636znopdms0'),
          subtitle: this.$t('verify.index.5636znopdv40'),
        },
        {
          icon: require("@/assets/img/icon2.png"),
          title: this.$t('verify.index.5636znope3s0'),
          subtitle: "",
        },
      ],
  
      legalize_type:null,
      appointment:{
        scenes:{}
      }
    };
  },
  computed:{
    langSuff(){
        return  this.$store.state.langSuff
    },
  },
  created(){
      this.statusList()
  },
  methods:{
      statusList(){
          statusGet()
          .then(res=>{
              // this.list = 
              if(res.code==1){
                  this.terminal = res.data.terminal;
                  this.status = res.data.status;
                  // this.legalize_type = 3;
                  this.legalize_type = res.data.legalize_type;
                  this.appointment = res.data.appointment??{};
                  localStorage.setItem('pageId',this.appointment.extra)
                  localStorage.setItem('isModify',2)
                  if(['1','5'].includes(String(this.status))){
                      this.$routerTo('documentType')
                  }
              }
          })
      },
      parseTime(time, cFormat) {
            if (arguments.length === 0) {
                return null
            }
            const format = cFormat || '{y}/{m}/{d} {h}:{i}:{s}'
            let date
            if (typeof time === 'undefined' || time === null || time === 'null' || time=='') {
                return ''
            } else if (typeof time === 'object') {
                date = time
            } else {
                if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
                time = parseInt(time)
                }
                if ((typeof time === 'number') && (time.toString().length === 10)) {
                time = time * 1000
                }
                
                date = new Date(time)
            }
            const formatObj = {
                y: date.getFullYear(),
                m: date.getMonth() + 1,
                d: date.getDate(),
                h: date.getHours(),
                i: date.getMinutes(),
                s: date.getSeconds(),
                a: date.getDay()
            }
            const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
                let value = formatObj[key]
                // Note: getDay() returns 0 on Sunday
                // if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
                if (result.length > 0 && value < 10) {
                value = '0' + value
                }
                return value || 0
            })
            return time_str
        },
  }
};
</script>
<style lang="less" scoped>
.stepList {
  padding-top: 0.2rem;
  li {
    margin: 0.15rem 0;
    img {
      max-width: 0.3rem;
      vertical-align: text-bottom;
    }
    h2 {
      display: inline-block;
      font-size: 0.26rem;
      margin-left: 0.15rem;
    }
    h3 {
      font-size: 0.26rem;
      padding: 0.05rem 0 0.05rem 0.67rem;
    }
  }
}
.detailCon {
  border-top: 0.01rem solid @sliderColor;
  border-bottom: 0.01rem solid @sliderColor;
  .title {
    position: relative;
    padding: 0.2rem 0 0.2rem 0.1rem;
    h2 {
      font-size: 0.5rem;
      font-weight: 300;
      color: @sizeColor;
    }
    span {
      font-size: 0.26rem;
      color: @placeColor;
    }
    a {
      position: absolute;
      top: 0.2rem;
      right: 0;
      font-size: 0.26rem;
      color: @btnColor;
    }
    .meetDetail {
      font-size: 0.26rem;
      color: @sizeColor;
      margin-top: 0.2rem;
    }
  }
}
.imgList {
  margin-top: 0.3rem;
  li {
    background: url("~@/assets/img/verBg.png") no-repeat center center;
    background-size: 102% 102%;
    color: #fff;
    padding: 0.15rem 0.35rem 0.4rem;
    margin: 0.05rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h1 {
      font-size: 0.4rem;
      line-height: 0.7rem;
      font-weight: 300;
    }
    h3 {
      font-size: 0.22rem;
      font-weight: 300;
    }
    img {
      max-width: 0.2rem;
    }
  }
}
</style>
